<template>
    <el-form ref="form" :model="form" :rules="rules" v-show="menuShow">
        <el-col :span="8">
            <el-form-item prop="addrProvince">
                <el-col :span="16">
                    <el-select v-model="form.addrProvince" size="small" placeholder="请选择" @change="selectProvince" class="allWidth">
                        <el-option
                                v-for="item in addrProvinceArrary"
                                :key="item.itemCode"
                                :label="item.itemName"
                                :value="item.itemCode">
                            <span style="float: left">{{ item.itemName }}</span>
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    &nbsp&nbsp省
                </el-col>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item prop="addrCity">
                <el-col :span="16">
                    <el-select v-model="form.addrCity" size="small" placeholder="请选择" @change="selectCity" class="allWidth">
                        <el-option
                                v-for="item in addrCityArrary"
                                :key="item.itemCode"
                                :label="item.itemName"
                                :value="item.itemCode">
                            <span style="float: left">{{ item.itemName }}</span>
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    &nbsp&nbsp市
                </el-col>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item prop="addrCounty">
                <el-col :span="16">
                    <el-select v-model="form.addrCounty" size="small" placeholder="请选择" class="allWidth">
                        <el-option
                                v-for="item in addrCountyArrary"
                                :key="item.itemCode"
                                :label="item.itemName"
                                :value="item.itemCode">
                            <span style="float: left">{{ item.itemName }}</span>
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    &nbsp&nbsp区
                </el-col>
            </el-form-item>
        </el-col>
    </el-form>
</template>

<script>
    export default {
        name: "dictionaryCpt",
        props:{
            menuShow:'',
            ruleShow:'',
            rules:'',
            form:''
        },
        data(){
            return{
                addrProvinceArrary:[],
                addrCityArrary:[],
                addrCountyArrary:[],
                menuShow:'',
                ruleShow:'',
                form:{
                    addrProvince:'',
                    addrCity:'',
                    addrCounty:''
                },
                rules:{
                //     addrProvince: [
                //         { required: true, message: '请选择所在省', trigger: 'blur' },
                //     ],
                //     addrCity: [
                //         { required: true, message: '请选择所在市', trigger: 'blur' },
                //     ],
                //     addrCounty: [
                //         { required: true, message: '请选择所在区', trigger: 'blur' },
                //     ],
                }
            }
        },
        methods:{
            selectProvince(value){
                console.log('value')
                console.log(value)
                this.form.addrCity='';
                this.form.addrCounty='';
                this.addrCityArrary=commonCodeList.getcommonCodeChildren(value);
            },
            selectCity(value){
                console.log('value')
                console.log(value)
                this.form.addrCounty='';
                this.addrCountyArrary=commonCodeList.getcommonCodeChildren(value);
            }
        }
    }
</script>

<style scoped>

</style>